<!DOCTYPE html>
<html class="layui-bg-white">
<head th:include="include :: header"></head>
<body>
<div class="layui-form">
    <input id="id" name="id" th:value="${video.id}" type="hidden">
    <input id="name" name="name" th:value="${video.name}" type="hidden">
    <input id="fileUrl" name="fileUrl" th:value="${video.fileUrl}" type="hidden">
    <div id="id_video"></div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index',         //主入口模块
        tcPlayer: 'tcPlayer'
    }).use(['index', 'tcPlayer'], function () {
        var $ = layui.$;

        $('title').text($('#name').val());

        var fileUrl = $('#fileUrl').val();
        var width = document.body.clientWidth;
        var height = document.body.clientHeight;

        var suffix = 'm3u8';
        var startIndex = fileUrl.lastIndexOf(".");
        if (startIndex != -1) {
            suffix = fileUrl.substring(startIndex + 1, fileUrl.length).toLowerCase();
        }

        var myCtx = ctx;
        if (fileUrl.indexOf("http") >= 0) {
            myCtx = "";
        }

        if (suffix == 'm3u8') {
            new TcPlayer('id_video', {
                "m3u8": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        } else if (suffix == 'mp4') {
            new TcPlayer('id_video', {
                "mp4": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        } else if (suffix == 'flv') {
            new TcPlayer('id_video', {
                "flv": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        } else if (suffix == 'hls') {
            new TcPlayer('id_video', {
                "hls": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        } else if (suffix == 'rtmp') {
            new TcPlayer('id_video', {
                "rtmp": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        } else if (suffix == 'flv') {
            new TcPlayer('id_video', {
                "flv": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        } else {
            new TcPlayer('id_video', {
                "m3u8": myCtx + fileUrl, //请替换成实际可用的播放地址
                "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "width": width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": height//视频的显示高度，请尽量使用视频分辨率高度
            });
        }
    })
</script>
</body>
</html>